<template>
	<div class="icon-item-box" v-show="!isGroup">
		<my-icon
			class="m-l-4 icon-item"
			:class="{ active: status.lock }"
			size="15"
			:icon="status.lock ? 'LockClosedOutline' : 'LockOpenOutline'"
			@click="lockHandle"
		/>
		<my-icon
			class="m-l-4 icon-item"
			:class="{ active: status.hide }"
			size="15"
			:icon="status.hide ? 'EyeOffOutline' : 'EyeOutline'"
			@click="showHandle"
		/>
	</div>
</template>

<script setup>
const props = defineProps({
	isGroup: {
		type: Boolean,
		default: false
	},
	hover: {
		type: Boolean,
		default: false
	},
	status: {
		type: Object,
		default: () => ({
			lock: false,
			hide: false
		})
	}
});

// 隐藏 / 展示
function showHandle(e) {
	e.stopPropagation();
	props.status.hide ? $store.chart.setShow() : $store.chart.setHide();
}

// 锁定 / 解锁
function lockHandle(e) {
	e.stopPropagation();
	props.status.lock ? $store.chart.setUnLock() : $store.chart.setLock();
}
</script>

<style lang="scss" scoped>
.icon-item-box {
	display: inherit;

	.icon-item {
		opacity: 0;
		transition: all 0.4s;
		&.active,
		&:hover {
			color: var(--el-color-primary);
		}
		&.active {
			opacity: 1 !important;
		}
	}
}
</style>
